<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单详情 - 商品商城</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
    <link href="/css/shop.css" rel="stylesheet">
    <style>
        .order-detail-container {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
            margin-bottom: 20px;
        }
        
        .order-status {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            padding: 15px;
            border-radius: 8px;
            background-color: #f8f9fa;
        }
        
        .status-icon {
            font-size: 24px;
            margin-right: 15px;
        }
        
        .status-pending {
            color: #ffc107;
        }
        
        .status-paid {
            color: #17a2b8;
        }
        
        .status-shipped {
            color: #28a745;
        }
        
        .status-delivered {
            color: #17a2b8;
        }
        
        .status-cancelled {
            color: #dc3545;
        }
        
        .order-info {
            margin-bottom: 20px;
        }
        
        .info-title {
            font-weight: 600;
            color: #333;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }
        
        .info-item {
            display: flex;
            margin-bottom: 10px;
        }
        
        .info-label {
            width: 100px;
            font-weight: 500;
            color: #666;
        }
        
        .info-value {
            flex: 1;
            color: #333;
        }
        
        .order-product {
            display: flex;
            margin-bottom: 15px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }
        
        .order-product:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: none;
        }
        
        .order-product-image {
            width: 80px;
            height: 80px;
            object-fit: cover;
            border-radius: 4px;
            margin-right: 15px;
        }
        
        .order-product-info {
            flex: 1;
        }
        
        .order-product-name {
            font-weight: 500;
            color: #333;
            margin-bottom: 5px;
        }
        
        .order-product-spec {
            color: #666;
            font-size: 14px;
            margin-bottom: 5px;
        }
        
        .order-product-price {
            color: #e74a3b;
            font-weight: 600;
        }
        
        .order-product-quantity {
            color: #666;
        }
        
        .order-timeline {
            position: relative;
            padding-left: 30px;
            margin-top: 20px;
        }
        
        .order-timeline::before {
            content: '';
            position: absolute;
            left: 10px;
            top: 10px;
            height: calc(100% - 10px);
            width: 2px;
            background-color: #eee;
        }
        
        .timeline-item {
            position: relative;
            margin-bottom: 20px;
        }
        
        .timeline-item:last-child {
            margin-bottom: 0;
        }
        
        .timeline-item::before {
            content: '';
            position: absolute;
            left: -24px;
            top: 5px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: #e74a3b;
        }
        
        .timeline-time {
            color: #666;
            font-size: 14px;
            margin-bottom: 5px;
        }
        
        .timeline-content {
            color: #333;
        }
        
        .order-summary {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 20px;
            padding-top: 15px;
            border-top: 1px solid #eee;
        }
        
        .order-total {
            font-weight: 600;
            color: #e74a3b;
            font-size: 18px;
        }
        
        .order-actions {
            display: flex;
            gap: 10px;
        }
        
        .form-control:focus {
            border-color: #e74a3b;
            box-shadow: 0 0 0 0.25rem rgba(231, 74, 59, 0.25);
        }
        
        .btn-primary {
            background-color: #e74a3b;
            border-color: #e74a3b;
        }
        
        .btn-primary:hover {
            background-color: #c0392b;
            border-color: #c0392b;
        }
        
        .btn-outline-primary {
            color: #e74a3b;
            border-color: #e74a3b;
        }
        
        .btn-outline-primary:hover {
            background-color: #e74a3b;
            border-color: #e74a3b;
        }
        
        .refund-form {
            margin-top: 20px;
            padding: 15px;
            border-radius: 8px;
            background-color: #f8f9fa;
        }
        
        .refund-reason {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm sticky-top">
        <div class="container">
            <a class="navbar-brand" href="/shop">
                <i class="bi bi-shop"></i> 商品商城
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/shop">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/shop/products">所有商品</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/shop/categories">商品分类</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/shop/promotions">促销商品</a>
                    </li>
                </ul>
                <form class="d-flex me-3" action="/shop/search" method="get">
                    <input class="form-control me-2" type="search" name="keyword" placeholder="搜索商品...">
                    <button class="btn btn-outline-primary" type="submit">
                        <i class="bi bi-search"></i>
                    </button>
                </form>
                <ul class="navbar-nav">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown">
                            <i class="bi bi-person-circle"></i> 我的账户
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="/auth/login">登录</a></li>
                            <li><a class="dropdown-item" href="/auth/register">注册</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="/shop/profile">个人中心</a></li>
                            <li><a class="dropdown-item" href="/shop/orders">我的订单</a></li>
                            <li><a class="dropdown-item" href="/shop/cart">购物车</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 页面头部 -->
    <div class="page-header">
        <div class="container">
            <h1 class="fw-bold">订单详情</h1>
            <p class="lead mb-0">查看订单信息和状态</p>
        </div>
    </div>

    <div class="container mb-5">
        <div class="row">
            <div class="col-lg-12">
                <!-- 订单状态 -->
                <div class="order-detail-container">
                    <div class="order-status">
                        <i class="bi bi-circle-fill status-icon" 
                           th:classappend="${order.status == 'pending' ? 'status-pending' : 
                                          order.status == 'paid' ? 'status-paid' : 
                                          order.status == 'shipped' ? 'status-shipped' : 
                                          order.status == 'delivered' ? 'status-delivered' : 
                                          'status-cancelled'}"></i>
                        <div>
                            <h5 class="mb-1" th:text="${order.status == 'pending' ? '待付款' : 
                                                       order.status == 'paid' ? '已付款' : 
                                                       order.status == 'shipped' ? '已发货' : 
                                                       order.status == 'delivered' ? '已送达' : 
                                                       '已取消'}">订单状态</h5>
                            <p class="mb-0 text-muted" th:text="${order.status == 'pending' ? '请在下单后24小时内完成付款' : 
                                                         order.status == 'paid' ? '商家正在准备您的商品' : 
                                                         order.status == 'shipped' ? '商品正在配送中，请耐心等待' : 
                                                         order.status == 'delivered' ? '订单已完成，感谢您的购买' : 
                                                         '订单已取消'}">状态描述</p>
                        </div>
                    </div>
                </div>
                
                <!-- 订单信息 -->
                <div class="order-detail-container">
                    <h5 class="info-title">订单信息</h5>
                    <div class="order-info">
                        <div class="info-item">
                            <div class="info-label">订单号：</div>
                            <div class="info-value" th:text="${order.orderNumber}">订单号</div>
                        </div>
                        <div class="info-item">
                            <div class="info-label">下单时间：</div>
                            <div class="info-value" th:text="${#dates.format(order.createTime, 'yyyy-MM-dd HH:mm:ss')}">下单时间</div>
                        </div>
                        <div class="info-item" th:if="${order.payTime}">
                            <div class="info-label">付款时间：</div>
                            <div class="info-value" th:text="${#dates.format(order.payTime, 'yyyy-MM-dd HH:mm:ss')}">付款时间</div>
                        </div>
                        <div class="info-item" th:if="${order.shipTime}">
                            <div class="info-label">发货时间：</div>
                            <div class="info-value" th:text="${#dates.format(order.shipTime, 'yyyy-MM-dd HH:mm:ss')}">发货时间</div>
                        </div>
                        <div class="info-item" th:if="${order.deliverTime}">
                            <div class="info-label">送达时间：</div>
                            <div class="info-value" th:text="${#dates.format(order.deliverTime, 'yyyy-MM-dd HH:mm:ss')}">送达时间</div>
                        </div>
                        <div class="info-item" th:if="${order.cancelTime}">
                            <div class="info-label">取消时间：</div>
                            <div class="info-value" th:text="${#dates.format(order.cancelTime, 'yyyy-MM-dd HH:mm:ss')}">取消时间</div>
                        </div>
                        <div class="info-item" th:if="${order.trackingNumber}">
                            <div class="info-label">物流单号：</div>
                            <div class="info-value" th:text="${order.trackingNumber}">物流单号</div>
                        </div>
                        <div class="info-item">
                            <div class="info-label">支付方式：</div>
                            <div class="info-value" th:text="${order.paymentMethod == 'alipay' ? '支付宝' : 
                                                           order.paymentMethod == 'wechat' ? '微信支付' : 
                                                           order.paymentMethod == 'unionpay' ? '银联支付' : 
                                                           '货到付款'}">支付方式</div>
                        </div>
                    </div>
                </div>
                
                <!-- 收货信息 -->
                <div class="order-detail-container">
                    <h5 class="info-title">收货信息</h5>
                    <div class="order-info">
                        <div class="info-item">
                            <div class="info-label">收货人：</div>
                            <div class="info-value" th:text="${order.address.name}">收货人</div>
                        </div>
                        <div class="info-item">
                            <div class="info-label">联系电话：</div>
                            <div class="info-value" th:text="${order.address.phone}">联系电话</div>
                        </div>
                        <div class="info-item">
                            <div class="info-label">收货地址：</div>
                            <div class="info-value" th:text="${order.address.province + ' ' + order.address.city + ' ' + order.address.district + ' ' + order.address.detail}">收货地址</div>
                        </div>
                    </div>
                </div>
                
                <!-- 商品信息 -->
                <div class="order-detail-container">
                    <h5 class="info-title">商品信息</h5>
                    <div th:each="item : ${order.items}" class="order-product">
                        <img th:src="${item.productImage ?: '/images/product-placeholder.jpg'}" 
                             th:alt="${item.productName}"
                             class="order-product-image">
                        <div class="order-product-info">
                            <div class="order-product-name" th:text="${item.productName}">商品名称</div>
                            <div class="order-product-spec" th:if="${item.specification}" th:text="${item.specification}">规格</div>
                            <div class="d-flex justify-content-between">
                                <div class="order-product-price">¥<span th:text="${#numbers.formatDecimal(item.price, 1, 2)}">0.00</span></div>
                                <div class="order-product-quantity">x<span th:text="${item.quantity}">1</span></div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="order-summary">
                        <div class="order-total">
                            共 <span th:text="${order.totalQuantity}">0</span> 件商品，合计: ¥<span th:text="${#numbers.formatDecimal(order.totalAmount, 1, 2)}">0.00</span>
                        </div>
                        <div class="order-actions">
                            <a href="/shop/orders" class="btn btn-outline-primary">
                                <i class="bi bi-arrow-left me-1"></i>返回订单列表
                            </a>
                            <button th:if="${order.status == 'pending'}" class="btn btn-primary" id="payOrderBtn">
                                <i class="bi bi-credit-card me-1"></i>立即付款
                            </button>
                            <button th:if="${order.status == 'pending'}" class="btn btn-outline-danger" id="cancelOrderBtn">
                                <i class="bi bi-x-circle me-1"></i>取消订单
                            </button>
                            <button th:if="${order.status == 'shipped'}" class="btn btn-outline-success" id="confirmOrderBtn">
                                <i class="bi bi-check-circle me-1"></i>确认收货
                            </button>
                            <button th:if="${order.status == 'delivered'}" class="btn btn-outline-warning" id="refundOrderBtn">
                                <i class="bi bi-arrow-counterclockwise me-1"></i>申请退款
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 订单进度 -->
                <div class="order-detail-container" th:if="${order.status != 'cancelled'}">
                    <h5 class="info-title">订单进度</h5>
                    <div class="order-timeline">
                        <div class="timeline-item">
                            <div class="timeline-time" th:text="${#dates.format(order.createTime, 'yyyy-MM-dd HH:mm:ss')}">下单时间</div>
                            <div class="timeline-content">订单创建成功</div>
                        </div>
                        <div class="timeline-item" th:if="${order.payTime}">
                            <div class="timeline-time" th:text="${#dates.format(order.payTime, 'yyyy-MM-dd HH:mm:ss')}">付款时间</div>
                            <div class="timeline-content">支付成功</div>
                        </div>
                        <div class="timeline-item" th:if="${order.shipTime}">
                            <div class="timeline-time" th:text="${#dates.format(order.shipTime, 'yyyy-MM-dd HH:mm:ss')}">发货时间</div>
                            <div class="timeline-content">商家已发货</div>
                        </div>
                        <div class="timeline-item" th:if="${order.deliverTime}">
                            <div class="timeline-time" th:text="${#dates.format(order.deliverTime, 'yyyy-MM-dd HH:mm:ss')}">送达时间</div>
                            <div class="timeline-content">订单已送达</div>
                        </div>
                    </div>
                </div>
                
                <!-- 退款申请表单 -->
                <div class="order-detail-container" id="refundForm" style="display: none;">
                    <h5 class="info-title">申请退款</h5>
                    <div class="refund-form">
                        <div class="mb-3">
                            <label for="refundReason" class="form-label">退款原因</label>
                            <select class="form-select" id="refundReason" required>
                                <option value="">请选择退款原因</option>
                                <option value="quality">商品质量问题</option>
                                <option value="description">商品与描述不符</option>
                                <option value="damage">商品损坏</option>
                                <option value="wrong">发错商品</option>
                                <option value="not_received">未收到商品</option>
                                <option value="other">其他原因</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="refundDescription" class="form-label">退款说明</label>
                            <textarea class="form-control" id="refundDescription" rows="4" placeholder="请详细描述退款原因..."></textarea>
                        </div>
                        <div class="mb-3">
                            <label for="refundAmount" class="form-label">退款金额</label>
                            <div class="input-group">
                                <span class="input-group-text">¥</span>
                                <input type="number" class="form-control" id="refundAmount" th:value="${order.totalAmount}" step="0.01" min="0.01" th:max="${order.totalAmount}" readonly>
                            </div>
                            <div class="form-text">最大可退款金额: ¥<span th:text="${#numbers.formatDecimal(order.totalAmount, 1, 2)}">0.00</span></div>
                        </div>
                        <div class="d-flex gap-2">
                            <button type="button" class="btn btn-primary" id="submitRefundBtn">提交申请</button>
                            <button type="button" class="btn btn-secondary" id="cancelRefundBtn">取消</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <h5>商品商城</h5>
                    <p>提供优质商品，满足您的购物需求</p>
                </div>
                <div class="col-md-4">
                    <h5>快速链接</h5>
                    <ul>
                        <li><a href="/shop">首页</a></li>
                        <li><a href="/shop/products">所有商品</a></li>
                        <li><a href="/shop/categories">商品分类</a></li>
                        <li><a href="/shop/promotions">促销商品</a></li>
                    </ul>
                </div>
                <div class="col-md-4">
                    <h5>客户服务</h5>
                    <ul>
                        <li><a href="#">帮助中心</a></li>
                        <li><a href="#">退换货政策</a></li>
                        <li><a href="#">配送说明</a></li>
                        <li><a href="#">联系我们</a></li>
                    </ul>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2023 商品商城. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 通用的提示函数
            function showToast(message, type = 'info') {
                // 创建toast容器（如果不存在）
                let toastContainer = document.querySelector('.toast-container');
                if (!toastContainer) {
                    toastContainer = document.createElement('div');
                    toastContainer.className = 'toast-container position-fixed bottom-0 end-0 p-3';
                    toastContainer.style.zIndex = '11';
                    document.body.appendChild(toastContainer);
                }
                
                // 创建toast元素
                const toastId = 'toast-' + Date.now();
                const toastHtml = `
                    <div id="${toastId}" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
                        <div class="toast-header">
                            <i class="bi bi-${type === 'success' ? 'check-circle-fill text-success' : 
                                           type === 'danger' ? 'exclamation-triangle-fill text-danger' : 
                                           type === 'warning' ? 'exclamation-triangle-fill text-warning' : 
                                           'info-circle-fill text-info'} me-2"></i>
                            <strong class="me-auto">${type === 'success' ? '成功' : 
                                                 type === 'danger' ? '错误' : 
                                                 type === 'warning' ? '警告' : '提示'}</strong>
                            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                        </div>
                        <div class="toast-body">
                            ${message}
                        </div>
                    </div>
                `;
                
                toastContainer.insertAdjacentHTML('beforeend', toastHtml);
                
                // 显示toast
                const toastElement = document.getElementById(toastId);
                const toast = new bootstrap.Toast(toastElement);
                toast.show();
                
                // 监听隐藏事件，从DOM中移除
                toastElement.addEventListener('hidden.bs.toast', function() {
                    toastElement.remove();
                });
            }
            
            // 全局函数，供其他地方使用
            window.showToast = showToast;
            
            // 获取订单ID
            const orderId = window.location.pathname.split('/').pop();
            
            // 付款按钮
            const payOrderBtn = document.getElementById('payOrderBtn');
            if (payOrderBtn) {
                payOrderBtn.addEventListener('click', function() {
                    // 跳转到支付页面
                    window.location.href = `/shop/orders/${orderId}/pay`;
                });
            }
            
            // 取消订单按钮
            const cancelOrderBtn = document.getElementById('cancelOrderBtn');
            if (cancelOrderBtn) {
                cancelOrderBtn.addEventListener('click', function() {
                    if (confirm('确定要取消这个订单吗？')) {
                        fetch(`/shop/orders/${orderId}/cancel`, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                            }
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                showToast('订单已取消', 'success');
                                setTimeout(() => {
                                    location.reload();
                                }, 1500);
                            } else {
                                showToast('取消失败: ' + data.message, 'danger');
                            }
                        })
                        .catch(error => {
                            console.error('Error:', error);
                            showToast('取消失败，请重试', 'danger');
                        });
                    }
                });
            }
            
            // 确认收货按钮
            const confirmOrderBtn = document.getElementById('confirmOrderBtn');
            if (confirmOrderBtn) {
                confirmOrderBtn.addEventListener('click', function() {
                    if (confirm('确认已收到商品吗？')) {
                        fetch(`/shop/orders/${orderId}/confirm`, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                            }
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                showToast('已确认收货', 'success');
                                setTimeout(() => {
                                    location.reload();
                                }, 1500);
                            } else {
                                showToast('确认失败: ' + data.message, 'danger');
                            }
                        })
                        .catch(error => {
                            console.error('Error:', error);
                            showToast('确认失败，请重试', 'danger');
                        });
                    }
                });
            }
            
            // 申请退款按钮
            const refundOrderBtn = document.getElementById('refundOrderBtn');
            const refundForm = document.getElementById('refundForm');
            const cancelRefundBtn = document.getElementById('cancelRefundBtn');
            
            if (refundOrderBtn) {
                refundOrderBtn.addEventListener('click', function() {
                    refundForm.style.display = 'block';
                    // 滚动到退款表单
                    refundForm.scrollIntoView({ behavior: 'smooth' });
                });
            }
            
            if (cancelRefundBtn) {
                cancelRefundBtn.addEventListener('click', function() {
                    refundForm.style.display = 'none';
                });
            }
            
            // 提交退款申请
            const submitRefundBtn = document.getElementById('submitRefundBtn');
            if (submitRefundBtn) {
                submitRefundBtn.addEventListener('click', function() {
                    const refundReason = document.getElementById('refundReason').value;
                    const refundDescription = document.getElementById('refundDescription').value;
                    const refundAmount = document.getElementById('refundAmount').value;
                    
                    if (!refundReason) {
                        showToast('请选择退款原因', 'warning');
                        return;
                    }
                    
                    fetch(`/shop/orders/${orderId}/refund`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({
                            reason: refundReason,
                            description: refundDescription,
                            amount: refundAmount
                        })
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            showToast('退款申请已提交', 'success');
                            setTimeout(() => {
                                location.reload();
                            }, 1500);
                        } else {
                            showToast('申请失败: ' + data.message, 'danger');
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        showToast('申请失败，请重试', 'danger');
                    });
                });
            }
        });
    </script>
</body>
</html>